import React, { Component } from 'react';
import { Button, Form, Input, Modal, Space, DatePicker, Select, Switch, Radio } from 'antd'
import GoBack from '@/components/TheGoBack'
import TheTable from "@/components/TheTable"
import TheButton from '@/components/TheButton';
import ThePagination from '@/components/ThePagination';
import { apitStorePetArchivesPage, apitStorePetArchivesAdd, apitStorePetArchivesEdit, apitStorePetArchivesDel, apitStorePetArchivesView } from '@/request/cashier'
import { apiSelectPetSpecies } from "@/request/hotel"
import moment from 'moment'
import { phoneReg } from '@/utils/regexp'
import store from '@/store/store'

const { Option } = Select
export default class petInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            columns: [
                {
                    title: "宠物名称",
                    dataIndex: "petName",
                    key: "petName",
                },
                {
                    title: "宠物生日",
                    dataIndex: "birthday",
                    key: "birthday",
                },

                {
                    title: "性别",
                    dataIndex: "petSex",
                    key: "petSex",
                    render: (text) => {
                        if (text === 1) return '弟弟'
                        if (text === 2) return '妹妹'


                    }
                },
                {
                    title: "宠物种类",
                    dataIndex: "petSpecies",
                    key: "petSpecies",
                    render: (text) => {
                        if (text == 1) return '猫咪'
                        if (text == 0) return '狗狗'
                        if (text == 2) return '异宠'
                    }
                },
                {
                    title: "宠物品种",
                    dataIndex: "petVarieties",
                    key: "petVarieties",

                },
                {
                    title: "绝育情况",
                    dataIndex: "sterilizationStatus",
                    key: "sterilizationStatus",
                    render: (text) => {
                        if (text === 'Y') return '已绝育'
                        if (text === 'N') return '未绝育'
                    }
                },
                {
                    title: "疫苗情况",
                    dataIndex: "vaccineStatus",
                    key: "vaccineStatus",
                    render: (text) => {
                        if (text === 'Y') return '已打'
                        if (text === 'N') return '未打'
                    }
                },
                {
                    title: "操作",
                    width: 250,
                    render: (text) => {
                        return (
                            <div>
                                <TheButton onClick={() => this.edit(text.stortPetArchivesId)} >编辑</TheButton>
                                <TheButton onClick={() => this.del(text.stortPetArchivesId)} >删除</TheButton>
                            </div>
                        )
                    }
                }
            ],
            dataSource: [],
            isModalVisible: false,
            stortPetArchivesId: '',
            modalTitle: '新增',
            pageNo: 1, pageSize: 10, total: 0,
            loading: false,
            petName: '',
            petSpecies: null,
            petVarietiesOpthion: [],
            petVarieties: ""
        }
    }
    formRef = React.createRef()
    componentDidMount() {

        this.getData()
    }
    async getData() {
        this.setState({ loading: true })
        let { pageSize, pageNo } = this.state
        console.log(this.props.match);
        await apitStorePetArchivesPage({ memberId: this.props.match.params.petId, pageSize, pageNo, petName: this.state.petName, petSpecies: this.state.petSpecies ? this.state.petSpecies : '' }).then(res => {
            if (res.data && res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    pageNo: res.pageNo,
                    pageSize: res.pageSize,
                    total: res.totalCount
                })
            }
        })
        this.setState({ loading: false })
    }
    add() {
        store.dispatch({
            type: 'OpenBroadcast',
            data: '测试语音播放'
        })
        this.setState({
            isModalVisible: true, memberId: '',
            modalTitle: '新增'
        }, () => this.resetForm())
    }
    edit(stortPetArchivesId) {
        this.setState({
            isModalVisible: true,
            stortPetArchivesId: stortPetArchivesId,
            modalTitle: '编辑'

        }, async () => {
            let res = await apitStorePetArchivesView({ stortPetArchivesId })
            if (res.code === 0) {
                this.getSelectPetSpecies(res.data.petSpecies)
                this.formRef.current.setFieldsValue({
                    petName: res.data.petName,
                    petSpeciesId: res.data.petSpeciesId,
                    petVarieties: res.data.petVarieties,
                    petSpecies: res.data.petSpecies,
                    petSex: res.data.petSex,
                    sterilizationStatus: res.data.sterilizationStatus,
                    vaccineStatus: res.data.vaccineStatus,
                    birthday: res.data.birthday ? moment(res.data.birthday) : '',
                })
            } else {
                React.$message({ type: 'warning', content: res.codeMessage })
            }
        })
    }
    async del(stortPetArchivesId) {
        Modal.confirm({
            title: '提示',
            content: '是否确认删除？',
            onOk: async () => {
                const res = await apitStorePetArchivesDel({ stortPetArchivesId })
                if (res.code === 0) {
                    React.$message({ type: 'success', content: res.codeMessage })
                } else {
                    React.$message({ type: 'warning', content: res.codeMessage })
                }
                this.getData()
            },
            onCancel() {
            },
        });
    }
    getSelectPetSpecies = async (speciesSort) => {
        this.formRef.current.setFieldsValue({
            petSpeciesId: ""
        })
        let res = await apiSelectPetSpecies({speciesSort})
        if (res.code === 0) {
            let data = []
            let option = {}
            let petVarietiesOpthion = []
            for (let item in res.data) {
                data.push(res.data[item])
            }
            for (const iterator of data.flat()) {
                option = {
                    label: iterator.speciesName,
                    value: iterator.petSpeciesId,
                }
                petVarietiesOpthion.push(option)
            }
            this.setState({
                petVarietiesOpthion
            })
        }
    }
    petVarietiesChange = (value, option) => {
        this.setState({
            petVarieties: option.label
        })
    }
    handleOk = () => {
        this.formRef.current.validateFields().then(async values => {
            values.birthday = moment(values.birthday).format('YYYY-MM-DD')
            values.petVarieties = this.state.petVarieties
            this.setState({
                loading: true
            })
            let res
            if (this.state.stortPetArchivesId) {
                res = await apitStorePetArchivesEdit({ ...values, stortPetArchivesId: this.state.stortPetArchivesId })
            } else {
                res = await apitStorePetArchivesAdd({ ...values, memberId: this.props.match.params.petId })
            }
            if (res.code === 0) {
                React.$message({ type: 'success', content: res.codeMessage })
            } else {
                React.$message({ type: 'warning', content: res.codeMessage })
            }
            this.setState({
                loading: false,
                isModalVisible: false,
                stortPetArchivesId: ''
            }, () => {
                this.getData()
            })

        })

    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false, stortPetArchivesId: ''
        })
    }
    resetForm() {
        setTimeout(() => {
            this.formRef.current.resetFields();
        }, 1000)
    }
    pageChange = (e) => {
        this.setState({
            pageNo: e
        }, () => {
            this.getData()
        })

    }
    onFinish = (values) => {


    }
    changePaeams(e, key) {
        console.log(e, 'eee');
        if (key === 'petName') {
            this.setState({
                [key]: e.target.value
            })
        } else {
            this.setState({
                [key]: e
            })
        }

    }
    search() {
        this.setState({
            pageNo: 1,
            pageSize: 10
        }, () => {
            this.getData()
        })
    }
    clear() {
        this.setState({
            pageNo: 1,
            pageSize: 10,
            petName: '',
            petSpecies: null
        }, () => {
            this.getData()
        })
    }
    render() {
        const { pageNo, pageSize, total, columns, dataSource, isModalVisible, modalTitle, loading, petName, petSpecies, petVarietiesOpthion } = this.state
        return (
            <div className="commodity-list-detail p-layout-box">
                <GoBack history={this.props.history} title={'宠物信息'} />
                <div style={{ 'marginTop': 20 }}>
                    <div>
                        <Input allowClear placeholder="宠物名称" maxLength={20} value={petName} style={{ width: 200, marginRight: 10 }} onChange={(e) => this.changePaeams(e, 'petName')} />
                        <Select allowClear placeholder="宠物种类" value={petSpecies} style={{ width: 200, marginRight: 10 }} onChange={(e) => this.changePaeams(e, 'petSpecies')}>
                            <Option value={'1'}>猫</Option>
                            <Option value={'0'}>狗</Option>
                        </Select>
                        <Button onClick={() => this.search()} style={{ marginRight: 10 }} type='primary'>搜索</Button>
                        <Button onClick={() => this.clear()} style={{ marginRight: 10 }}>重置</Button>
                        <Button onClick={() => this.add()} style={{ marginBottom: 10 }}>新增</Button>
                    </div>
                    <TheTable columns={columns} dataSource={dataSource} />
                    <ThePagination pageNo={pageNo}
                        pageSize={pageSize}
                        total={total}
                        pageChange={this.pageChange}></ThePagination>
                </div>
                <Modal title={modalTitle} visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} confirmLoading={loading}>
                    <Form
                        ref={this.formRef}
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="宠物名称"
                            name="petName"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入宠物名称！',
                                },
                            ]}
                        >
                            <Input maxLength={15} />
                        </Form.Item>
                        <Form.Item
                            label="宠物种类"
                            name="petSpecies"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择宠物种类！',

                                }
                            ]}

                        >
                            <Select onChange={this.getSelectPetSpecies}>
                                <Option value={0} >狗狗</Option>
                                <Option value={1} >猫咪</Option>
                                <Option value={2} >异宠</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="宠物品种"
                            name="petSpeciesId"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择宠物品种！',

                                }
                            ]}
                        >
                            <Select onChange={this.petVarietiesChange} showSearch
                                options={petVarietiesOpthion} filterOption={(input, option) => (option?.label ?? '').includes(input)}
                            >
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="性别"
                            name="petSex"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择性别！',

                                }
                            ]}
                        >
                            <Radio.Group >
                                <Radio value={1}>弟弟</Radio>
                                <Radio value={2}>妹妹</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="	宠物生日"
                            name="birthday"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择日期！',
                                },
                            ]}
                        >
                            <DatePicker format='YYYY-MM-DD' />
                        </Form.Item>
                        <Form.Item
                            label="绝育情况"
                            name="sterilizationStatus"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择绝育情况！',

                                }
                            ]}
                        >
                            <Radio.Group >
                                <Radio value="Y">已绝育</Radio>
                                <Radio value="N">未绝育</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="疫苗情况"
                            name="vaccineStatus"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择疫苗情况！',

                                }
                            ]}
                        >
                            <Radio.Group >
                                <Radio value="Y">已打</Radio>
                                <Radio value="N">未打</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
